import React, { useEffect } from "react";
import { LockOutlined, UserOutlined } from '@ant-design/icons';

import { Form, Input, Button, Checkbox, Layout } from "antd";
import axios from 'axios'
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const { Content } = Layout;

const Login = () => {

  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };


  const onFinish = (values) => {
    console.log("values", values)
    axios
      .post("/api/login", {
        email: values.username,
        password: values.password,
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };


  return (
    <Layout style={{ backgroundColor: "#353764", height: "100vh" }}>

      <Particles
        id="tsparticles"
        init={particlesInit}

        options={{
          "fullScreen": {
            "enable": true,
            "zIndex": 1
          },
          "particles": {
            "number": {
              "value": 10,
              "density": {
                "enable": false,
                "value_area": 800
              }
            },
            "color": {
              "value": "#fff"
            },
            "shape": {
              "type": "point",
              "options": {
                "sides": 5
              }
            },
            "opacity": {
              "value": 0.8,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            "size": {
              "value": 4,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
              }
            },
            "rotate": {
              "value": 0,
              "random": true,
              "direction": "clockwise",
              "animation": {
                "enable": true,
                "speed": 5,
                "sync": false
              }
            },
            "line_linked": {
              "enable": true,
              "distance": 600,
              "color": "#ffffff",
              "opacity": 0.4,
              "width": 2
            },
            "move": {
              "enable": true,
              "speed": 2,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "events": {
              "onhover": {
                "enable": true,
                "mode": ["grab"]
              },
              "onclick": {
                "enable": false,
                "mode": "bubble"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true,
          "background": {
            "color": "#111",
            "image": "",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
          }
        }}
      />
      <Content style={{ display: "flex", justifyContent: "center", alignItems: "center", zIndex: "3" }}>

        <Form
          name="login-form"
          style={{ backgroundColor: "gray", padding: "32px", borderRadius: "8px", width: "500px" }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <div style={{
            "line-height": "35px",
            "color": "black",
            "font-size": "35px",
            "text-align": "center",
            "fontWeight": "bolder"

          }}>
            EIMP
          </div>
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <Input prefix={<UserOutlined
              className="site-form-item-icon" />}
              placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登陆
            </Button>
          </Form.Item>
        </Form>
      </Content>
    </Layout >

  );
};

export default Login;
